<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="教程">
    <meta name="author" content="Pudding">
    
    <title>
        
            HTML学习路线 |
        
        Pudding
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en","path":"search.json"};
    KEEP.theme_config = {"toc":{"enable":true,"number":false,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.svg","favicon":"/images/logo.svg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":true,"scale":true},"first_screen":{"enable":true,"background_img":"https://xpoet.cn/images/bg.svg","description":"Keep writing and Keep loving."},"scroll":{"progress_bar":{"enable":true},"percent":{"enable":false}}},"local_search":{"enable":true,"preload":true},"code_copy":{"enable":true,"style":"default"},"pjax":{"enable":true},"lazyload":{"enable":true},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    
        <span class="scroll-progress-bar"></span>
    

    
        <span class="pjax-progress-bar"></span>
        <span class="pjax-progress-icon">
            <i class="fas fa-circle-notch fa-spin"></i>
        </span>
    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Pudding
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               target="_blank" rel="noopener" href="https://www.baidu.com/"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       target="_blank" rel="noopener" href="https://www.baidu.com/">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">HTML学习路线</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.svg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Pudding</span>
                        
                            <span class="author-label">Lv1</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2022-03-30 20:28:48</span>
        <span class="mobile">2022-03-30 20:28</span>
    </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/HTML/">HTML</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h1 id="一-HTML简介"><a href="#一-HTML简介" class="headerlink" title="一. HTML简介"></a>一. HTML简介</h1><h2 id="1-网页"><a href="#1-网页" class="headerlink" title="1. 网页"></a>1. 网页</h2><p>网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页， 常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。</p>
<h2 id="2-什么是-HTML"><a href="#2-什么是-HTML" class="headerlink" title="2. 什么是 HTML"></a>2. 什么是 HTML</h2><p>HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (markup language)。</p>
<p>它由一系列的<strong>元素（<a class="link"   target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Element" >elements<i class="fas fa-external-link-alt"></i></a>）</strong>组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://mdn.mozillademos.org/files/16475/element.png"
                      alt="img"
                ></p>
<p>前端人员开发代码 —-&gt; 浏览器显示代码（解析、渲染） —–&gt; 生成最后的 Web 页面</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://typora99.oss-cn-hangzhou.aliyuncs.com/img/202203311958249.png"
                      alt="image-20220331195839402"
                ></p>
<h2 id="3-Web标准"><a href="#3-Web标准" class="headerlink" title="3. Web标准"></a>3. Web标准</h2><p>为什么需要web标准？</p>
<ul>
<li>没有一个统一的标准，即使是相同的代码在不同的浏览器中打开也是效果不一样的。</li>
<li>因此产生：Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。</li>
</ul>
<blockquote>
<p>Web 标准的构成</p>
<p>主要包括结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面</p>
</blockquote>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://typora99.oss-cn-hangzhou.aliyuncs.com/img/202203312000906.png"
                      alt="image-20220331200006664"
                ></p>
<p>一个形象的类比：</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://typora99.oss-cn-hangzhou.aliyuncs.com/img/202203312000366.png"
                      alt="image-20220331200039653"
                ></p>
<h1 id="二-HTML基本语法"><a href="#二-HTML基本语法" class="headerlink" title="二. HTML基本语法"></a>二. HTML基本语法</h1><h2 id="1-HTML-基本结构"><a href="#1-HTML-基本结构" class="headerlink" title="1. HTML 基本结构"></a>1. HTML 基本结构</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span> 不是一个 HTML 标签文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页</span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>标题<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是我的页面<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://typora99.oss-cn-hangzhou.aliyuncs.com/img/202203312001363.png"
                      alt="image-20220330192431546"
                ></p>
<h1 id="三-HTML-常用标签"><a href="#三-HTML-常用标签" class="headerlink" title="三. HTML 常用标签"></a>三. HTML 常用标签</h1><h2 id="1-标题标签-lt-h1-gt-lt-h6-gt"><a href="#1-标题标签-lt-h1-gt-lt-h6-gt" class="headerlink" title="1. 标题标签 &lt; h1 &gt;  ~ &lt; h6 &gt;"></a>1. 标题标签 &lt; h1 &gt;  ~ &lt; h6 &gt;</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span> 我是一级标题 <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p>单词 head 的缩写，意为头部、标题</p>
<p>标签语义：作为标题使用，并且依据重要性递减。</p>
<h2 id="2-段落标签-lt-p-gt"><a href="#2-段落标签-lt-p-gt" class="headerlink" title="2. 段落标签&lt; p &gt;"></a>2. 段落标签&lt; p &gt;</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span> 我是一个段落标签 <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>单词 paragraph [ˈpærəgræf] 的缩写，意为段落。</p>
<p>标签语义：可以把 HTML 文档分割为若干段落</p>
<h2 id="3-换行标签-lt-br-gt"><a href="#3-换行标签-lt-br-gt" class="headerlink" title="3. 换行标签 &lt; br &gt;"></a>3. 换行标签 &lt; br &gt;</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<p>单词 break 的缩写，意为打断、换行。 </p>
<p>标签语义：强制换行。</p>
<h2 id="4-分区标签-lt-div-gt"><a href="#4-分区标签-lt-div-gt" class="headerlink" title="4. 分区标签&lt; div &gt;"></a>4. 分区标签&lt; div &gt;</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span> 这是头部 <span class="tag">&lt;/<span class="name">div</span>&gt;</span> </span><br></pre></td></tr></table></figure>

<p>div 是 division 的缩写，表示分割、分区</p>
<p> &lt; div &gt;标签用来布局，但是现在一行只能放一个大盒子</p>
<ul>
<li>块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。</li>
</ul>
<h2 id="5-单元格标签-lt-span-gt"><a href="#5-单元格标签-lt-span-gt" class="headerlink" title="5. 单元格标签&lt; span &gt;"></a>5. 单元格标签&lt; span &gt;</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span> 今日价格 <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>span 意为跨度、跨距</p>
<p>&lt; span &gt; 标签用来布局，一行上可以多个 。小盒子</p>
<ul>
<li>内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素&lt; a &gt;或者强调元素&lt; em &gt;和 &lt; strong &gt;</li>
</ul>
<h2 id="6-图像标签-lt-src-gt"><a href="#6-图像标签-lt-src-gt" class="headerlink" title="6. 图像标签 &lt; src &gt;"></a>6. 图像标签 &lt; src &gt;</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;图像URL&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<p>单词 image 的缩写，意为图像。</p>
<p>src 是&lt; img &gt;标签的必须属性，它用于指定图像文件的路径和文件名</p>
<h2 id="7-超链接标签-lt-a-gt"><a href="#7-超链接标签-lt-a-gt" class="headerlink" title="7.  超链接标签&lt; a &gt;"></a>7.  超链接标签&lt; a &gt;</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;跳转目标&quot;</span> <span class="attr">target</span>=<span class="string">&quot;目标窗口的弹出方式&quot;</span>&gt;</span> 文本或图像 <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>单词 anchor [ˈæŋkə(r)] 的缩写，意为：锚。</p>
<h2 id="8-表格标签-lt-table-gt"><a href="#8-表格标签-lt-table-gt" class="headerlink" title="8. 表格标签&lt; table &gt;"></a>8. 表格标签&lt; table &gt;</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;<span class="name">th</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">     ...</span><br><span class="line">  <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;<span class="name">td</span>&gt;</span>单元格内的文字<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">  	 ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>tr：table row</p>
<p>th：table head</p>
<p>td：table data</p>
<p>因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>今日小说排行榜<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">align</span>=<span class="string">&quot;center&quot;</span> <span class="attr">width</span>=<span class="string">&quot;500&quot;</span> <span class="attr">height</span>=<span class="string">&quot;249&quot;</span> <span class="attr">border</span>=<span class="string">&quot;1&quot;</span> <span class="attr">cellspacing</span>=<span class="string">&quot;0&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>排名<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>关键词<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>趋势<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>进入搜索<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>最近七日<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">th</span>&gt;</span>相关链接<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>1<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>鬼吹灯<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;down.jpg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>456<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>123<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>贴吧<span class="tag">&lt;/<span class="name">a</span>&gt;</span> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>图片<span class="tag">&lt;/<span class="name">a</span>&gt;</span> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>百科<span class="tag">&lt;/<span class="name">a</span>&gt;</span> <span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="9-列表标签"><a href="#9-列表标签" class="headerlink" title="9. 列表标签"></a>9. 列表标签</h2><p>根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表</p>
<p>表格是用来显示数据的，那么列表就是用来布局的</p>
<h3 id="9-1-无序列表-lt-ul-gt"><a href="#9-1-无序列表-lt-ul-gt" class="headerlink" title="9.1 无序列表&lt; ul &gt;"></a>9.1 无序列表&lt; ul &gt;</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>ul：unordered List</p>
<h3 id="9-2-有序列表-lt-ol-gt"><a href="#9-2-有序列表-lt-ol-gt" class="headerlink" title="9.2 有序列表 &lt; ol &gt;"></a>9.2 有序列表 &lt; ol &gt;</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>ol：ordered list</p>
<h3 id="9-3-自定义列表-lt-dl-gt"><a href="#9-3-自定义列表-lt-dl-gt" class="headerlink" title="9.3 自定义列表 &lt; dl &gt;"></a>9.3 自定义列表 &lt; dl &gt;</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dl</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span>&gt;</span>名词1<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词1解释1<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词1解释2<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>dl：definition lists</p>
<p>dt：definition term</p>
<p>dd：definition description</p>
<h2 id="10-表单标签-lt-form-gt"><a href="#10-表单标签-lt-form-gt" class="headerlink" title="10.  表单标签&lt; form &gt;"></a>10.  表单标签&lt; form &gt;</h2><p>使用表单目的是为了收集用户信息</p>
<p>在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://typora99.oss-cn-hangzhou.aliyuncs.com/img/202203312001118.png"
                      alt="image-20220330195708540"
                ></p>
<h3 id="10-1-表单域"><a href="#10-1-表单域" class="headerlink" title="10.1 表单域"></a>10.1 表单域</h3><p>&lt; form &gt;会把它范围内的表单元素信息提交给服务器</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">“url地址”</span> <span class="attr">method</span>=<span class="string">“提交方式”</span> <span class="attr">name</span>=<span class="string">“表单域名称</span>&quot;&gt;</span></span><br><span class="line"> 	各种表单元素控件</span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-2-表单控件-表单元素"><a href="#10-2-表单控件-表单元素" class="headerlink" title="10.2  表单控件(表单元素)"></a>10.2  表单控件(表单元素)</h3><blockquote>
<p><strong>&lt; input &gt;表单元素</strong></p>
</blockquote>
<p>input 是输入的意思，而在表单元素中  标签用于收集用户信息</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;属性值&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<p>type 属性的属性值及其描述如下：</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://typora99.oss-cn-hangzhou.aliyuncs.com/img/202203312001083.png"
                      alt="image-20220330200034482"
                ></p>
<blockquote>
<p> <strong>&lt; label &gt;标签</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;sex&quot;</span>&gt;</span>男<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> <span class="attr">id</span>=<span class="string">&quot;sex&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<p> laben标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上,用来增加用户体验</p>
<p>label 标签的 for 属性应当与相关元素的 id 属性相同</p>
<blockquote>
<p><strong>&lt; select &gt; 表单元素</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span>&gt;</span>选项1<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span>&gt;</span>选项2<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span>&gt;</span>选项3<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>&lt; option &gt; 中定义 selected &#x3D;“ selected “ 时，当前项即为默认选中项。</p>
<blockquote>
<p><strong>&lt; textarea &gt; 表单元素</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">textarea</span> <span class="attr">rows</span>=<span class="string">&quot;3&quot;</span> <span class="attr">cols</span>=<span class="string">&quot;20&quot;</span>&gt;</span></span><br><span class="line"> 	文本内容</span><br><span class="line"><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>cols&#x3D;“每行中的字符数” ，rows&#x3D;“显示的行数”</p>
<h1 id="四-HTML属性"><a href="#四-HTML属性" class="headerlink" title="四. HTML属性"></a>四. HTML属性</h1><h2 id="1-属性格式"><a href="#1-属性格式" class="headerlink" title="1. 属性格式"></a>1. 属性格式</h2><p><img src="https://mdn.mozillademos.org/files/16476/attribute.png" alt="&amp;amp;lt;p class=&quot;editor-note&quot;&gt;我的猫咪脾气爆&amp;amp;lt;/p&gt;"></p>
<h2 id="2-每个不同的标签有着多个不同的属性"><a href="#2-每个不同的标签有着多个不同的属性" class="headerlink" title="2. 每个不同的标签有着多个不同的属性"></a>2. 每个不同的标签有着多个不同的属性</h2><p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://typora99.oss-cn-hangzhou.aliyuncs.com/img/202203312001252.png"
                      alt="image-20220330202104867"
                ></p>
<p>我们通过该网址查找属性：<a class="link"   target="_blank" rel="noopener" href="https://www.w3school.com.cn/tags/tag_form.asp" >https://www.w3school.com.cn/tags/tag_form.asp<i class="fas fa-external-link-alt"></i></a></p>
<p>例如：form表单标签就对应如下的所有属性</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="https://typora99.oss-cn-hangzhou.aliyuncs.com/img/202203312001049.png"
                      alt="image-20220330202238045"
                ></p>
<h1 id="五-授人以鱼不如授人以渔"><a href="#五-授人以鱼不如授人以渔" class="headerlink" title="五. 授人以鱼不如授人以渔"></a>五. 授人以鱼不如授人以渔</h1><p>经常查阅文档是一个非常好的学习习惯。 </p>
<p>推荐的网址：</p>
<p>w3school：<a class="link"   target="_blank" rel="noopener" href="https://www.w3school.com.cn/index.html" >https://www.w3school.com.cn/index.html<i class="fas fa-external-link-alt"></i></a></p>
<p>mdn web：<a class="link"   target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" >https://developer.mozilla.org/zh-CN/docs/Web/HTML<i class="fas fa-external-link-alt"></i></a></p>
<blockquote>
<p>参考内容：以上内容参考pink老师的HTML教程</p>
</blockquote>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/HTML/">#HTML</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2022/03/24/hello-hexo/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Hello hexo</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2022.3.24</span>
              -
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Pudding</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80-HTML%E7%AE%80%E4%BB%8B"><span class="nav-text">一. HTML简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E7%BD%91%E9%A1%B5"><span class="nav-text">1. 网页</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E4%BB%80%E4%B9%88%E6%98%AF-HTML"><span class="nav-text">2. 什么是 HTML</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-Web%E6%A0%87%E5%87%86"><span class="nav-text">3. Web标准</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C-HTML%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95"><span class="nav-text">二. HTML基本语法</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-HTML-%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84"><span class="nav-text">1. HTML 基本结构</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89-HTML-%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE"><span class="nav-text">三. HTML 常用标签</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E6%A0%87%E9%A2%98%E6%A0%87%E7%AD%BE-lt-h1-gt-lt-h6-gt"><span class="nav-text">1. 标题标签 &lt; h1 &gt;  ~ &lt; h6 &gt;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E6%AE%B5%E8%90%BD%E6%A0%87%E7%AD%BE-lt-p-gt"><span class="nav-text">2. 段落标签&lt; p &gt;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E6%8D%A2%E8%A1%8C%E6%A0%87%E7%AD%BE-lt-br-gt"><span class="nav-text">3. 换行标签 &lt; br &gt;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E5%88%86%E5%8C%BA%E6%A0%87%E7%AD%BE-lt-div-gt"><span class="nav-text">4. 分区标签&lt; div &gt;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-%E5%8D%95%E5%85%83%E6%A0%BC%E6%A0%87%E7%AD%BE-lt-span-gt"><span class="nav-text">5. 单元格标签&lt; span &gt;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-%E5%9B%BE%E5%83%8F%E6%A0%87%E7%AD%BE-lt-src-gt"><span class="nav-text">6. 图像标签 &lt; src &gt;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE-lt-a-gt"><span class="nav-text">7.  超链接标签&lt; a &gt;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE-lt-table-gt"><span class="nav-text">8. 表格标签&lt; table &gt;</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE"><span class="nav-text">9. 列表标签</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#9-1-%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8-lt-ul-gt"><span class="nav-text">9.1 无序列表&lt; ul &gt;</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-2-%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8-lt-ol-gt"><span class="nav-text">9.2 有序列表 &lt; ol &gt;</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-3-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8-lt-dl-gt"><span class="nav-text">9.3 自定义列表 &lt; dl &gt;</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE-lt-form-gt"><span class="nav-text">10.  表单标签&lt; form &gt;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#10-1-%E8%A1%A8%E5%8D%95%E5%9F%9F"><span class="nav-text">10.1 表单域</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10-2-%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6-%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0"><span class="nav-text">10.2  表单控件(表单元素)</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9B%9B-HTML%E5%B1%9E%E6%80%A7"><span class="nav-text">四. HTML属性</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%B1%9E%E6%80%A7%E6%A0%BC%E5%BC%8F"><span class="nav-text">1. 属性格式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E6%AF%8F%E4%B8%AA%E4%B8%8D%E5%90%8C%E7%9A%84%E6%A0%87%E7%AD%BE%E6%9C%89%E7%9D%80%E5%A4%9A%E4%B8%AA%E4%B8%8D%E5%90%8C%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="nav-text">2. 每个不同的标签有着多个不同的属性</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%94-%E6%8E%88%E4%BA%BA%E4%BB%A5%E9%B1%BC%E4%B8%8D%E5%A6%82%E6%8E%88%E4%BA%BA%E4%BB%A5%E6%B8%94"><span class="nav-text">五. 授人以鱼不如授人以渔</span></a></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="Search..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>



    
<script src="/js/local-search.js"></script>




    
<script src="/js/code-copy.js"></script>




    
<script src="/js/lazyload.js"></script>



<div class="post-scripts pjax">
    
        
<script src="/js/left-side-toggle.js"></script>

<script src="/js/libs/anime.min.js"></script>

<script src="/js/toc.js"></script>

    
</div>


    
<script src="/js/libs/pjax.min.js"></script>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        window.pjax = new Pjax({
            selectors: [
                'head title',
                '.page-container',
                '.pjax'
            ],
            history: true,
            debug: false,
            cacheBust: false,
            timeout: 0,
            analytics: false,
            currentUrlFullReload: false,
            scrollRestoration: false,
            // scrollTo: true,
        });

        document.addEventListener('pjax:send', () => {
            KEEP.utils.pjaxProgressBarStart();
        });

        document.addEventListener('pjax:complete', () => {
            KEEP.utils.pjaxProgressBarEnd();
            window.pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
            KEEP.refresh();
        });
    });
</script>



</body>
</html>
